<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        .test {
            width: 200px ;
            height: 200px ;
            border: 1px solid #1e9fff;
            margin: 50px auto ;
            border-radius: 50px ; /* 元素 四个角落 水平半径 和 垂直半径 都是 50像素 */
            /* transition: height 5s ; 意思是 height 在5s 内完成变换 */
            /* transition: width 5s ; 意思是 width 在5s 内完成变换 */
            transition: all 0.5s ; /* all 表示所有属性 */
        }

        .test:hover {
            width: 400px ;
            height: 400px ;
            border-radius : 100px ;
            /* box-shadow : 水平偏移   垂直偏移   模糊距离   阴影距离   阴影颜色*/
            box-shadow: 0 0 10px 8px #ff8c00;
        }
    </style>
</head>
<body>

    <div class="test"></div>

</body>
</html>